<html>
  <head>
	<title>P6  by wangtao</title>
  </head>
  <body>
	<style type="text/css">
		#sql{
			width: 85%;
			height: 80%;
			outline:none;
			resize:none;
			overflow: auto;
			/**
			word-wrap:break-word
			**/
			border:1px solid #000
		}
		textarea,PRE{
			width: 100%;
			outline:none;
			resize:none;
			border:0px;
			word-wrap:break-word
			/**
			overflow:hidden;
			*/
			overflow-y:hidden;
		}
		
		#sql::-webkit-scrollbar {
        	width:6px;
        	height:6px;
	    }
	    #sql::-webkit-scrollbar-button{
	        background-color:#FFF;
	        display:none;
	    }
	    #sql::-webkit-scrollbar-track{
	        background:#FFF;
	    }
	    #sql::-webkit-scrollbar-thumb{
	        background:#CCC;
	        border-radius:6px;
	    }
	    #sql::-webkit-scrollbar-corner {
	        background:#FFF;
	    }
	    #sql::-webkit-scrollbar-resizer {
	        background:#FFF;
	    }
	    
		.center{
			margin:0 auto;
			text-align:center;
			padding:5px 0px;
		}
		.divCenter{
			margin:0 auto;
			padding:5px 0px;
		}
		.unselectable {
		   -moz-user-select: -moz-none;
		   -khtml-user-select: none;
		   -webkit-user-select: none;
		
		   /*
		     Introduced in IE 10.
		     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
		   */
		   -ms-user-select: none;
		   user-select: none;
		}
		
	</style>
	<!-- 操作区域  -->
	<div class="center unselectable">
	    <input type="checkbox" id="isClear" checked/>自动清空 <input type="text" id="clearNumber" style="width:45px;" title="清空频率,根据自己浏览器情况自行定制，请量力而行" value="50000" onkeyup="if(isNaN(this.value)){this.value=this.value.trim().replace(/\D/g,'');}"  onafterpaste="this.value=this.value.replace(/\D/g,'')"/>
	    <span style="margin-right: 20px;"> </span>
	    <input type="checkbox" id="isSave"/>保留: <input type="text" id="saveKeys" title="多个以英文逗号(,)分开， 注意大小写"/> (仅显示包含关键字的sql)
	    <span style="margin-right: 20px;"> </span>
	    <input type="checkbox" id="isFilter"/>过滤: <input type="text" id="filterKeys" title="多个以英文逗号(,)分开， 注意大小写"/> (过滤掉含有关键字的sql)
	    <span style="margin-right: 40px;"> </span>
	    <button onclick="clearAll();">清空</button>
	</div>
	
	<!-- sql显示区域  -->
    <div class="divCenter">
    	<!--  
    	<textarea  id="sql" readonly="readonly"></textarea >
    	 -->
    	 <div class="divCenter" id="sql" readonly="readonly"></div >
    </div>
    
    <!-- 系统消息提示区域  -->
    <div class="center unselectable">
	    <div id="systemMessage"></div>
	    <div id="info">版本号:0.9</div>
	    <div id="IE" style="color:red;"><!-- font-size:10px; -->
	    </div>
    </div>
	
    <script>
    	if (window.navigator.userAgent.indexOf("MSIE")>=1){//|| !!window.ActiveXObject || "ActiveXObject" in window
    		document.getElementById('IE').innerHTML = '**为更好的使用,请更换为非IE浏览器的极速模式**';
    	}
		/**
		* 增加一个sql记录
		* **/
		function addNew(text) {
		    var textarea = document.createElement("PRE");
		    var sql = document.createTextNode(text);
		    textarea.appendChild(sql);
		
		    document.getElementById('sql').appendChild(textarea);
		}
		/**
		* 清空所有记录
		* */
		function clearAll() {
		    document.getElementById('sql').innerHTML = '';
		    window.getSelection().removeAllRanges();
		}
		/**
		 * 展示sql
		 * **/
		function showMessage(text) {
		    //保留
		    if (document.getElementById('isSave').checked) {
		        var saveKeys = document.getElementById('saveKeys').value;
		        var list = saveKeys.split(",");
		        for (i = 0; i < list.length; i++) {
		            if (text.indexOf(list[i]) == -1) {
		                return;
		            }
		        }
		    }
		
		    //过滤
		    if (document.getElementById('isFilter').checked) {
		        var filterKeys = document.getElementById('filterKeys').value;
		        var list = filterKeys.split(",");
		        for (i = 0; i < list.length; i++) {
		            if (text.indexOf(list[i]) > -1) {
		                return;
		            }
		        }
		    }
		
		    //显示
		    addNew(text);
		
		    //清空
		    if (document.getElementById('isClear').checked) {
		        var clearNumber = document.getElementById('clearNumber').value;
		        var length = document.getElementById('sql').innerHTML.length;
		        if (length > clearNumber) {
		            clearAll();
		        }
		    }
		}
		
		function showSystemMessage(text) {
		    document.getElementById('systemMessage').innerHTML = text;
		}
		
		var ws = new WebSocket('ws://' + document.location.host + '/hellowebsocket');
		showSystemMessage('连接中...');
		ws.onopen = function() {
		    showSystemMessage('已连接到服务器!');
		};
		ws.onclose = function() {
		    showSystemMessage('连接已断开');
		};
		ws.onmessage = function(msg) {
		    showMessage(msg.data);
		};
        //ws.send(text);//发送消息
    </script>
  </body>
</html>